<template>
  <van-nav-bar
    title="分类"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />

  <div class="classify-box">
    <van-sidebar v-model="active">
      <van-sidebar-item
        v-for="item in goodsCateList"
        :key="item"
        :title="item"
        @click="handleClick"
      />
    </van-sidebar>
    <van-grid :column-num="3">
      <van-grid-item
        v-for="item in goodsBrandList"
        :key="item"
        icon="photo-o"
        :text="item.brand"
        @click="onGoCategoryList(item.brand)"
      />
    </van-grid>
  </div>
  <MyFooter></MyFooter>
</template>

<script>
import { getGoodsListCateApi, getGoodsListBrandApi } from "@/api/class.js";
import MyFooter from "@/components/MyFooter.vue";
export default {
  name: "ClassIf",
  data() {
    return {
      active: 0, //侧边栏的默认选中项
      goodsCateList: [], // 分类列表
      goodsBrandList: [], // 品牌列表
      category: "", // 当前所在分类名称
    };
  },
  components: {
    MyFooter,
  },
  methods: {
    // This is 关键
    handleClick(index) {
      this.active = index;
      this.category = this.goodsCateList[this.active];
    },
    // 获取商品分类
    onClickLeft() {
      this.$router.go(-1);
    },
    async getGoodsListCate(cb) {
      let res = await getGoodsListCateApi();
      if (res.data.code == 200) {
        this.goodsCateList = res.data.data;
        this.category = this.goodsCateList[this.active];
        cb && cb();
      }
    },
    //二级分类
    async getGoodsListBrand() {
      let res = await getGoodsListBrandApi({
        category: this.goodsCateList[this.active],
      });
      if (res.data.code == 200) {
        this.goodsBrandList = res.data.data;
      }
    },
    //分类品牌下的列表
    onGoCategoryList(item) {
      this.$router.push({
        path: "/Category",
        query: { goodsBrand: item, category: this.category },
      });
    },
  },
  created() {
    this.getGoodsListCate(this.getGoodsListBrand);
  },
  watch: {
    active: function () {
      this.getGoodsListBrand();
    },
  },
};
</script>

<style scoped>
.classify-box {
  display: flex;
  align-items: start;
}
.van-grid {
  flex: 1;
}
/* .van-grid-item {
  min-width: 88px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* font-size: 12px;
} */
/deep/ .van-grid-item__text {
  width: 0.82rem;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
